<!-- SvgIcon -->
<template>
    <svg aria-hidden="true" class="svg-icon" :style="{ height: size, width: size, margin: margin }">
        <use :xlink:href="symbolId" :fill="color"></use>
    </svg>
</template>

<script setup lang="ts" name="SvgIcon">
// 
import { computed } from "vue"
const props = defineProps({
    /**
     * 图标名称
     */
    name: {
        type: String,
        default: "",
    },
    /**
     * 图标前缀, 默认 icon
     * @description 需要与 vite.config.ts 中配置 symbolId 前缀保持一致
     */
    prefix: {
        type: String,
        default: "icon",
    },
    /**
     * 图标大小
     */
    size: {
        type: [String, Number],
        default: "16px",
    },
    /**
     * 图标颜色
     */
    color: {
        type: String,
        default: "#616263",
    },
    /**
     * 边缘空白
     */
    margin: {
        type: [String, Number],
        default: "auto",
    },
})
// symbolId 的值需要与 vite.config.ts中配置的 symbolId ( `icon-[dir]-[name]` ) 保持一致 。 
// 最终 symbolId 的值格式为 #icon-svgName。
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>

<style scoped lang="css"></style>
